<template>
  <div class="app-container">
    <div class="topform">
      <el-form ref="QueryForm" :model="QueryForm" @submit.native.prevent> 
        <el-form-item  class="reko-form-item" label="" label-width="0px" style="float: left;width:100px;">
          <el-select clearable v-model="QueryForm.search_type_user" size="mini">
            <el-option label="全部" value=""></el-option>
            <el-option label="客户姓名" value="0"></el-option>
            <el-option label="客户账号" value="3"></el-option> 
          </el-select>
        </el-form-item>
      <el-form-item class="reko-form-item" label="" label-width="5px" style="width: 80px;float: left">
          <el-input v-model="QueryForm.search_value_user" clearable autocomplete="off" size="mini"/>
        </el-form-item> 
        <el-form-item class="reko-form-item" label="审批模式" label-width="65px" style="float: left;width:150px;">
          <el-select clearable v-model="QueryForm.approval_model" size="mini">
            <el-option label="全部" value=""></el-option>
            <el-option label="在保" value="0"></el-option>
            <el-option label="超保" value="1"></el-option> 
            <el-option label="重寄" value="2"></el-option> 
          </el-select>
        </el-form-item>
      <el-form-item class="reko-form-item" label="售后" label-width="40px" style="float: left;width:130px;">
          <el-select clearable v-model="QueryForm.customer_uname" size="mini">
            <el-option label="全部" value=""></el-option>
            <el-option v-for="item in customers" :label="item.u_name" :value="item.uid"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="reko-form-item" label="" label-width="5px" style="width: 100px;float: left">
          <el-select clearable v-model="QueryForm.search_type_express_no" size="mini">
            <el-option label="全部" value=""></el-option>
            <el-option label="寄件单号" value="1"></el-option>
            <el-option label="返件单号" value="0"></el-option> 
          </el-select>
        </el-form-item>
      <el-form-item class="reko-form-item" label="" label-width="5px" style="width: 70px;float: left">
          <el-input v-model="QueryForm.search_value_express_no" clearable autocomplete="off" size="mini"/>
        </el-form-item>
        <el-form-item class="reko-form-item" label="返件类型" label-width="70px" style="width: 160px;float: left">
          <el-select clearable v-model="QueryForm.return_type" size="mini">
            <el-option label="全部" value=""></el-option>
            <el-option label="未提交返件" value="0"></el-option>  
            <el-option label="同意返件" value="1"></el-option>  
            <el-option label="不同意返件" value="2"></el-option> 
            <el-option label="无需返件" value="3"></el-option>  
          </el-select>
        </el-form-item>
        <el-form-item class="reko-form-item" label="" label-width="5px" style="width: 76px;float: left">
          <el-select clearable v-model="QueryForm.search_type_parts" size="mini">
            <el-option label="全部" value=""></el-option>
            <el-option label="物料名称" value="0"></el-option>
            <el-option label="物料编号" value="1"></el-option> 
          </el-select>
        </el-form-item>
             <el-form-item class="reko-form-item" label="" label-width="5px" style="width: 100px;float: left">
          <el-input v-model="QueryForm.search_value_parts" clearable autocomplete="off" size="mini"/>
        </el-form-item>
   <el-form-item class="reko-form-item" label="物料类型" label-width="70px" style="width: 160px;float: left">
          <el-select clearable v-model="QueryForm.parts_class" size="mini">
            <el-option label="全部" value=""></el-option>
            <el-option label="普通类" value="0"></el-option>
            <el-option label="返件检测类" value="1"></el-option>   
            <el-option label="错件类" value="2"></el-option>   
          </el-select>
        </el-form-item>
   <el-form-item class="reko-form-item" label="" label-width="5px" style="width: 100px;float: left">
          <el-select clearable v-model="QueryForm.search_type_date" size="mini">
            <el-option label="全部" value=""></el-option> 
            <el-option label="寄件时间" value="0"></el-option>   
            <el-option label="返件时间" value="1"></el-option>    
            <el-option label="到件时间" value="2"></el-option> 
            <el-option label="检测时间" value="3"></el-option>   
            <el-option label="报修时间" value="4"></el-option> 
            <el-option label="质保时间" value="5"></el-option> 
            <el-option label="发货时间" value="6"></el-option> 
            <el-option label="确认时间" value="7"></el-option>   
          </el-select>
        </el-form-item>
 <el-form-item class="reko-form-item" label="" label-width="5px" style="width: 350px;;float: left">
          <el-date-picker style="float: left;width: 45%;" v-model="QueryForm.search_value_date_start"
            format="yyyy-MM-dd" value-format="yyyy-MM-dd" clearable type="date" size="mini">
          </el-date-picker>
          <div style="float: left;margin: 0 5px; font-size:12px;">至</div>
          <el-date-picker style="float: left;width: 45%;" v-model="QueryForm.search_value_date_end"
            format="yyyy-MM-dd" value-format="yyyy-MM-dd" clearable type="date" size="mini">
          </el-date-picker>
        </el-form-item>
         <div style="float: right;line-height: 37px;">
         <el-button type="primary" size="mini" @click="excel(true)">导出</el-button>
         </div>
        <div style="clear:both;"> </div> 
        <!-- 第二行 -->
         <el-form-item class="reko-form-item" label="" label-width="0px" style="float: left;width:100px;">
          <el-select clearable v-model="QueryForm.search_type_id" size="mini">
            <el-option label="全部" value=""></el-option> 
            <el-option label="柜组ID" value="0"></el-option> 
            <el-option label="任务ID" value="1"></el-option> 
            <el-option label="机器名称" value="2"></el-option> 
            <el-option label="SN" value="3"></el-option> 
          </el-select>
        </el-form-item>
          <el-form-item class="reko-form-item" label="" label-width="5px" style="width: 80px;float: left">
          <el-input v-model="QueryForm.search_value_id" clearable autocomplete="off" size="mini"/>
        </el-form-item> 
          <el-form-item class="reko-form-item" label="问题属性" label-width="65px" style="float: left;width:150px;">
          <el-select clearable v-model="QueryForm.iswork" size="mini">
            <el-option label="全部" value=""></el-option>
            <el-option label="非生产" value="0"></el-option>  
            <el-option label="生产" value="1"></el-option> 
          </el-select>
        </el-form-item>
        <el-form-item class="reko-form-item" label="处理" label-width="40px" style="float: left;width:130px;">
          <el-select clearable v-model="QueryForm.repair_handle_state" size="mini">
            <el-option label="全部" value=""></el-option>
            <el-option label="售后处理中" value="0"></el-option>
            <el-option label="技术售后处理中" value="1"></el-option> 
            <el-option label="审批处理中" value="2"></el-option> 
            <el-option label="审批完成" value="3"></el-option> 
            <el-option label="审批被驳回" value="4"></el-option> 
            <el-option label="审批关闭 " value="5"></el-option> 
            <el-option label="已完成" value="6"></el-option> 
            <el-option label="已关闭" value="10"></el-option>   
          </el-select>
        </el-form-item>
          <el-form-item class="reko-form-item" label="" label-width="5px" style="width: 100px;float: left">
          <el-select clearable v-model="QueryForm.search_type_express_state" size="mini" @change="search_type_express_state_change">
            <el-option label="全部" value=""></el-option>
            <el-option label="寄件状态" value="0"></el-option>
            <el-option label="到件状态" value="1"></el-option> 
          </el-select>
        </el-form-item>
      <el-form-item class="reko-form-item" label="" label-width="5px" style="width: 70px;float: left">
             <el-select clearable v-model="QueryForm.search_value_express_state" size="mini">
            <el-option label="全部" value=""></el-option> 
            <el-option v-for="item in search_value_express_state_array" :label="item.label" :value="item.value"></el-option>
          </el-select>
      </el-form-item>
         <el-form-item  class="reko-form-item" label="补充返件" label-width="70px" style="width: 160px;float: left">
          <el-select clearable v-model="QueryForm.return_supplement_type" size="mini">
            <el-option label="全部" value=""></el-option>
            <el-option label="非补充返件" value="0"></el-option>
            <el-option label="首次" value="1"></el-option> 
            <el-option label="多次" value="2"></el-option> 
          </el-select>
        </el-form-item>
           <el-form-item class="reko-form-item" label="检测结果" label-width="80px" style="width: 175px;float: left">
          <el-select clearable v-model="QueryForm.check_result" size="mini">
            <el-option label="全部" value=""></el-option>
            <el-option label="无" value="0"></el-option>
            <el-option label="完好" value="1"></el-option>
            <el-option label="可修复" value="2"></el-option>
            <el-option label="无法修复" value="3"></el-option> 
          </el-select>
        </el-form-item>
           <el-form-item class="reko-form-item" label="检测状态" label-width="70px" style="width: 160px;float: left">
          <el-select clearable v-model="QueryForm.check_state" size="mini">
            <el-option label="全部" value=""></el-option>
            <el-option label="待检测" value="0"></el-option>
            <el-option label="已检测" value="1"></el-option>  
          </el-select>
        </el-form-item>
           <el-form-item class="reko-form-item" label="标签" label-width="70px" style="width: 160px;float: left">
          <el-select clearable v-model="QueryForm.census_tips_value" size="mini">
            <el-option label="全部" value=""></el-option>
            <el-option v-for="item in tags" :label="item.label.replace('_',' / ')" :value="item.value"></el-option> 
          </el-select>
        </el-form-item> 
        <div style="float: right;line-height: 37px;">
          <el-button native-type="submit" type="primary" style="margin-left: 20px" size="mini" 
            @click="Query(true)">搜索
          </el-button> 
        </div>
      </el-form>
    </div>
    <el-table element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)" v-loading="Loading" :data="list" 
      element-loading-text="加载中···" highlight-current-row  
      :header-cell-style="table_row_style" 
      :cell-style="{padding:'0px!important',background: 'revert',border:'0'}" width="100%"> 
      <!-- 424 25.5421% -->
      <el-table-column align="center" min-width="25.5421%" fixed :resizable="true" label="报修信息">
        <template slot-scope="scope"> 
            <table :class="scope.$index % 2 !=0? 'inner-table even-numbers-color':'inner-table'">
              <tr>
                <td class="table-inner-box-label in-co-1">任务<br/>ID</td>
                <td class="table-inner-box-content"><span>{{scope.row.repair_mission_id}}</span></td>
                <td class="table-inner-box-label in-co-1">报修时间</td>
                <td class="table-inner-box-content"><span>{{scope.row.repair_addtime}}</span></td>
                <td class="table-inner-box-label in-co-1" style="width:22px;" rowspan="2">问题描述</td>
                <td class="table-inner-box-content" rowspan="2">
                   <el-tooltip class="item" effect="dark" v-if="scope.row.repair_repair_des != null &&scope.row.repair_repair_des.length>=35" :content="scope.row.repair_repair_des" placement="top-start">
                    <span>
                      {{ scope.row.repair_repair_des.substring(0,35) + '...'}}
                    </span>
                  </el-tooltip>
                    <span v-else> {{ scope.row.repair_repair_des}}</span>
                   </td>
              </tr>
               <tr>
                <td class="table-inner-box-label in-co-1">问题属性</td>
                <td class="table-inner-box-content"><span>{{scope.row.repair_iswork_str}}</span></td>
                <td class="table-inner-box-label in-co-1">售后</td>
                <td class="table-inner-box-content"><span>{{scope.row.repair_customer_uname}}</span></td> 
               </tr>
               <tr>
                  <td class="table-inner-box-label in-co-1">客户账号</td>
                  <td class="table-inner-box-content"><span>{{scope.row.repair_user_loginname}}</span></td>
                  <td class="table-inner-box-label in-co-1">处理状态</td>
                  <td class="table-inner-box-content"><span>{{scope.row.repair_handle_state_str}}</span></td> 
                  <td class="table-inner-box-label in-co-1" style="width:22px;" rowspan="2">处理结果</td>
                  <td class="table-inner-box-content lastcontent" rowspan="2">
                      <el-tooltip class="item" effect="dark" v-if="scope.row.repair_technology_repair_handle_result != null &&scope.row.repair_technology_repair_handle_result.length>=35" :content="scope.row.repair_technology_repair_handle_result" placement="top-start">
                      <span>
                        {{ scope.row.repair_technology_repair_handle_result.substring(0,35) + '...'}}
                      </span>
                    </el-tooltip>
                      <span v-else> {{ scope.row.repair_technology_repair_handle_result}}</span>
                  </td>
                </tr>
                <tr>
                  <td class="table-inner-box-label in-co-1">客户姓名</td>
                  <td class="table-inner-box-content lastcontent"><span>{{scope.row.repair_user_name}}</span></td>
                  <td class="table-inner-box-label in-co-1">审批模式</td>
                  <td class="table-inner-box-content lastcontent"><span>{{scope.row.repair_approval_model_str}}</span></td> 
                </tr>
            </table>
            <div class="black-line"></div>
        </template>
      </el-table-column>
      <!-- 135 8.1325%-->
       <el-table-column align="center" min-width="8.1325%" fixed :resizable="true" label="机器信息">
        <template slot-scope="scope">
                <table :class="scope.$index % 2 !=0? 'inner-table even-numbers-color':'inner-table'">
              <tr>
                <td class="table-inner-box-label in-co-2">机器名称</td>
                <td class="table-inner-box-content"><span>{{scope.row.mch_name}}</span></td> 
              </tr>
               <tr>
                <td class="table-inner-box-label in-co-2">机器型号</td>
                <td class="table-inner-box-content"><span>{{scope.row.mch_kid_type}}</span></td> 
              </tr> 
               <tr>
                <td class="table-inner-box-label in-co-2">柜组<br/>ID</td>
                <td class="table-inner-box-content">
                  
                    <el-tooltip class="item" effect="dark" v-if="scope.row.mch_id != null &&scope.row.mch_id.length>=25" :content="scope.row.mch_id" placement="top-start">
                    <span>
                      {{ scope.row.mch_id.substring(0,25) + '...'}}
                    </span>
                  </el-tooltip>
                    <span v-else> {{ scope.row.mch_id}}</span>  
                  </td> 
              </tr> 
               <tr>
                <td class="table-inner-box-label in-co-2">机器<br/>SN</td>
                <td class="table-inner-box-content lastcontent"><span>{{scope.row.mch_sn}}</span></td> 
              </tr> 
            </table>
            <div class="black-line"></div>
        </template>
      </el-table-column>
      <!-- 136 8.1927%-->
       <el-table-column align="center" min-width="8.1927%" fixed :resizable="true" label="时间信息">
        <template slot-scope="scope">
              <table :class="scope.$index % 2 !=0? 'inner-table even-numbers-color':'inner-table'">
              <tr>
                <td class="table-inner-box-label in-co-3">质保时间</td>
                <td class="table-inner-box-content"><span>{{scope.row.mch_assurance_sdt}}</span></td> 
              </tr>
               <tr>
                <td class="table-inner-box-label in-co-3">发货时间</td>
                <td class="table-inner-box-content"><span>{{scope.row.mch_send_time}}</span></td> 
              </tr> 
               <tr>
                <td class="table-inner-box-label in-co-3">确认时间</td>
                <td class="table-inner-box-content"><span>{{scope.row.mch_confirm_time}}</span></td> 
              </tr> 
               <tr>
                <td class="table-inner-box-label in-co-3">发/确时差</td>
                <td class="table-inner-box-content lastcontent"><span>{{scope.row.mch_send_confirm_time_span}}</span></td> 
              </tr> 
            </table>
            <div class="black-line"></div>
        </template>
      </el-table-column>
      <!-- 272 16.3855%-->
      <el-table-column align="center" min-width="16.3855%" fixed :resizable="true" label="寄件返件信息">
        <template slot-scope="scope">
              <table :class="scope.$index % 2 !=0? 'inner-table even-numbers-color':'inner-table'">
              <tr>
                <td class="table-inner-box-label in-co-4">寄件时间</td>
                <td class="table-inner-box-content"><span>{{scope.row.repair_express_time}}</span></td> 
                <td class="table-inner-box-label in-co-4">返件时间</td>
                <td class="table-inner-box-content"><span>{{scope.row.return_addtime}}</span></td> 
              </tr>
               <tr>
                <td class="table-inner-box-label in-co-4">寄件单号</td>
                <td class="table-inner-box-content"><span>{{scope.row.repair_express_no}}</span></td> 
                <td class="table-inner-box-label in-co-4">返件单号</td>
                <td class="table-inner-box-content"><span>{{scope.row.return_express_no}}</span></td> 
              </tr> 
               <tr>
                <td class="table-inner-box-label in-co-4">寄件类型</td>
                <td class="table-inner-box-content"><span>{{scope.row.repair_express_model}}</span></td> 
                <td class="table-inner-box-label in-co-4">返件类型</td>
                <td class="table-inner-box-content"><span>{{scope.row.return_type_str}}</span></td> 
              </tr> 
               <tr>
                <td class="table-inner-box-label in-co-4">寄件状态</td>
                <td class="table-inner-box-content lastcontent"><span>{{scope.row.repair_express_state_str}}</span></td> 
                <td class="table-inner-box-label in-co-4">补充返件</td>
                <td class="table-inner-box-content lastcontent"><span>{{scope.row.return_supplement_type_str}}</span></td> 
              </tr> 
            </table>
            <div class="black-line"></div>
        </template>
      </el-table-column>
      <!-- 272 16.3855%-->
   <el-table-column align="center" min-width="16.3855%" fixed :resizable="true" label="物料信息">
        <template slot-scope="scope">
          <table :class="scope.$index % 2 !=0? 'inner-table even-numbers-color':'inner-table'">
              <tr>
                <td class="table-inner-box-label in-co-5">物料类型</td>
                <td class="table-inner-box-content"><span>{{scope.row.parts_class_str}}</span></td> 
                <td class="table-inner-box-label in-co-5">到件时间</td>
                <td class="table-inner-box-content"><span>{{scope.row.parts_return_express_receive_time}}</span></td> 
              </tr>
               <tr>
                <td class="table-inner-box-label in-co-5">物料编号</td>
                <td class="table-inner-box-content"><span>{{scope.row.parts_materiel_total_show_no}}</span></td> 
                <td class="table-inner-box-label in-co-5">到件状态</td>
                <td class="table-inner-box-content"><span>{{scope.row.parts_return_state_str}}</span></td> 
              </tr> 
               <tr>
                <td class="table-inner-box-label in-co-5">物料名称</td>
                <td class="table-inner-box-content"><span>{{scope.row.parts_materiel_name}}</span></td> 
                <td class="table-inner-box-label in-co-5">所属柜体</td>
                <td class="table-inner-box-content"><span>{{scope.row.parts_box_no}}</span></td> 
              </tr> 
               <tr>
                <td class="table-inner-box-label in-co-5">物料规格</td>
                <td class="table-inner-box-content lastcontent"> 
                   <el-tooltip class="item" effect="dark" v-if="scope.row.parts_materiel_specifications != null &&scope.row.parts_materiel_specifications.length>=20" :content="scope.row.parts_materiel_specifications" placement="top-start">
                    <span>
                      {{ scope.row.parts_materiel_specifications.substring(0,20) + '...'}}
                    </span>
                  </el-tooltip>
                    <span v-else> {{ scope.row.parts_materiel_specifications}}</span>
                  
                  </td> 
                <td class="table-inner-box-label in-co-5">物料数量</td>
                <td class="table-inner-box-content lastcontent"><span>{{scope.row.parts_count}}</span></td> 
              </tr> 
            </table>
            <div class="black-line"></div>
        </template>
      </el-table-column>
      <!-- 288 17.3494%-->
      <el-table-column align="center" min-width="17.3494%" fixed :resizable="true" label="物料检测信息">
        <template slot-scope="scope">
           <table :class="scope.$index % 2 !=0? 'inner-table even-numbers-color':'inner-table'">
              <tr>
                <td class="table-inner-box-label in-co-6">检测时间</td>
                <td class="table-inner-box-content"><span>{{scope.row.check_time}}</span></td> 
                <td class="table-inner-box-label in-co-6" rowspan="2"  style="width:20px;">检测说明</td>
                <td class="table-inner-box-content" rowspan="2"><span>{{scope.row.check_des}}</span></td> 
              </tr>
               <tr>
                <td class="table-inner-box-label in-co-6">检测人</td>
                <td class="table-inner-box-content"><span>{{scope.row.check_customer_uname}}</span></td> 
               
              </tr> 
               <tr>
                <td class="table-inner-box-label in-co-6">检测状态</td>
                <td class="table-inner-box-content"><span>{{scope.row.check_state_str}}</span></td>  
                <td class="table-inner-box-label in-co-7" rowspan="2"  style="width:20px;">标签</td>
                <td class="table-inner-box-content-nospan lastcontent" rowspan="2">
                    <div v-if="scope.row.census_tips_text != null && scope.row.census_tips_text != '' && scope.row.census_tips_text.split('/').length<=7" >
                     <el-tag  type="reko" effect="dark" size="mini" style="margin-left:5%;"  v-for="(item,index) in scope.row.census_tips_text.split('/')">{{item.replace('_',' / ')}}</el-tag> 
                    
                    </div> 
                    <div v-else-if="scope.row.census_tips_text != null && scope.row.census_tips_text != '' && scope.row.census_tips_text.split('/').length>7">{{scope.row.census_tips_text.replace('_',' / ')}}</div>
                </td> 
              </tr> 
               <tr>
                <td class="table-inner-box-label in-co-6">检测结果</td>
                <td class="table-inner-box-content lastcontent"><span>{{scope.row.check_result_str}}</span></td>  
              </tr> 
            </table>
            <div class="black-line"></div>
        </template>
      </el-table-column>
      <!-- 133 8.012%-->
    <el-table-column align="center" min-width="8.012%" fixed :resizable="true" label="管理">
        <template slot-scope="scope">
           <table :class="scope.$index % 2 !=0? 'inner-table even-numbers-color':'inner-table'">
              <tr style="height:100px;">
                <td class="table-inner-box-label in-co-7" style="width:20px;">备注</td>
                <td class="table-inner-box-content">
                    <el-tooltip class="item" effect="dark" v-if="scope.row.census_remark != null &&scope.row.census_remark.length>=35" :content="scope.row.census_remark" placement="top-start">
                    <span>
                      {{ scope.row.census_remark.substring(0,35) + '...'}}
                    </span>
                  </el-tooltip>
                    <span v-else> {{ scope.row.census_remark}}</span>
                     </td>  
              </tr>
               <tr>
                <td class="table-inner-box-label in-co-7" style="width:20px;">操作</td>
                <td class="table-inner-box-content lastcontent">
                  <el-row> 
                     <el-button type="primary" size="mini" @click="edit(scope.row)">编辑</el-button> 
                  </el-row> 
                  <el-row> 
                      <el-button type="primary" size="mini" @click="show_pic(scope.row)">照片</el-button> 
                  </el-row>
                  </td>  
              </tr>  
            </table>
            <div class="black-line"></div>
        </template>
      </el-table-column> 
    </el-table>
    <div class="pagination">
      <el-pagination style="text-align: center" layout="prev, pager, next" small :current-page="QueryForm.page"
        :page-size="QueryForm.pagesize" :total="total" @size-change="handleSizeChange"
        @current-change="handleCurrentChange">
      </el-pagination>
    </div>

    <!-- 编辑dialog -->
    <el-dialog :close-on-click-modal="false" title="编辑" :visible.sync="edit_dialog" width="28%">
      <el-form ref="edit_dialogform" :model="edit_dialogform" :rules="edit_dialogrule"
               label-width="100px"> 
        <el-form-item label="备注" prop="census_remark">
          <el-input v-model="edit_dialogform.census_remark" type="textarea" clearable
                    autocomplete="off"  rows="5"/>
        </el-form-item> 
         <el-form-item label="标签" prop="tags">
           <el-tag
              v-for="item in tags"
              :key="item.label"
              :type="item.type"
              :effect="item.effect" @click="click_tag(item);"  style="margin-left:2%;cursor: pointer;">
              {{ item.label.replace('_',' / ') }}
            </el-tag>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="edit_dialog = false">取消</el-button>
        <el-button type="primary" @click="edit_dialog_btn">确定</el-button>
      </div>
    </el-dialog>
    <!-- 照片展示 dialog --> 
    <el-dialog title="照片" :visible.sync="show_pic_dialog" width="40%" height="900">
      
    <div class="el-dialog-div">
      <div class="reko-image-div">
        <div>报修照片</div>
        <el-image style="width: 75px; height:75px; padding-left:2%; float:left;" lazy v-for="(item,index) in show_pic_dialogfrom.repair_des_pic" :key="index"
          :src="item" :preview-src-list="show_pic_dialogfrom.repair_des_pic">
        </el-image>
      </div>
      <div class="reko-image-div">
         <div>不同意返件照片</div>
        <el-image style="width: 75px; height:75px; padding-left:2%;float:left;" lazy v-for="(item,index) in show_pic_dialogfrom.return_pic" :key="index"
          :src="item" :preview-src-list="show_pic_dialogfrom.return_pic">
        </el-image>
      </div>
      <div style="clear:both;"></div>
      <div class="reko-image-div">
        <div>超保审批照片</div>
        <el-image style="width: 75px; height:75px; padding-left:2%;float:left;" lazy v-for="(item,index) in show_pic_dialogfrom.repair_transfer_screenshot" :key="index"
          :src="item" :preview-src-list="show_pic_dialogfrom.repair_transfer_screenshot">
        </el-image>
      </div>
      <div class="reko-image-div">
        <div>检测照片</div>
        <el-image style="width: 75px; height:75px; padding-left:2%;float:left;" lazy v-for="(item,index) in show_pic_dialogfrom.check_images" :key="index"
          :src="item" :preview-src-list="show_pic_dialogfrom.check_images">
        </el-image>
      </div>  
        </div>
              <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="medium" @click="show_pic_dialog = false">关闭</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<style>
.reko-form-item .el-form-item__label{
  font-size: 12px;
}
.table-inner-box-label {
  width: 32px;
  font-size:10px;  
  padding: 0!important;
  overflow: hidden;
}
.table-inner-box-content { 
  font-size:12px; 
  border-bottom: 1px solid #CCC; 
  padding: 0!important;
  overflow: hidden; 
}
.table-inner-box-content-nospan
{
   font-size:12px; 
  border-bottom: 1px solid #CCC; 
  padding: 0!important;
  overflow: hidden; 
}
.table-inner-box-content span{
   width: 100px; 
   height: 50px;
   overflow: hidden; 
}
.inner-table{
  border: 0;
  width:100%;
  height:220px;
  table-layout:fixed;
  top: 0; 
} 
.inner-table td{
   padding: 0!important;
}
 

.lastcontent { 
  border-bottom: 0px!important;
}

.in-co-1{
  background: #1CC2A5;
  color: white;
} 
.in-co-2{
  color: #FFFFFF;background:#409EFF
}
.in-co-3{
  color: #FFFFFF;background:#E4B163
}
.in-co-4{
  color: #FFFFFF;background:#EF8A8A
}
.in-co-5{
  color: #FFFFFF;background:#9747FF
}
.in-co-6{
  color: #FFFFFF;background:#E72C27
}
.in-co-7{
  color: #FFFFFF;background:#24BCD1
}
 
.black-line {
   width: 100%;
   height: 2px;
   background: #99a9bf;
   bottom: 0;
   position: absolute;
}
.reko-form-item
{
  margin-bottom: 3px!important;
}
.reko-image-div
{
   padding:2%;
   font-size: 14px;
   font-weight: 900;
   float: left;
   width: 100%;
   height: 100px;
}

.el-dialog-div{
    height: 400px;
     overflow: auto;
    }
.even-numbers-color
{ 
     background: rgb(235, 235, 235);
}
.even-numbers-color .table-inner-box-content
{
   background: rgb(235, 235, 235);
}
.el-tag--reko
{
    background-color: #fff;
    border-color: rgb(36, 188, 209);
    color: rgb(36, 188, 209);
}
.el-tag--dark.el-tag--reko
{
    background-color: rgb(36, 188, 209);
    border-color: rgb(36, 188, 209);
    color: #fff;
} 
/* .inner-table td  { border-bottom: 1px solid #CCC; }  */
</style>
<style lang="scss" scoped>
    .el-table {
    ::v-deep tbody .cell {
        padding: 0px!important;
    }
} 
</style>
<script type="es6">
import Cookies from "js-cookie";
import { Loading } from "element-ui";

export default {
  data() {
    return {
      tags:[ 
      ],
      send_state:[
          {  value:"0",label:"无寄件"  },
          {  value:"1",label:"已发货"  },
          {  value:"2",label:"待发货"  },
          {  value:"3",label:"未处理"  },
          {  value:"4",label:"关闭"  },
          {  value:"5",label:"审批中"  }
      ],
      get_state:[
          {  value:"1",label:"无需"  },
          {  value:"2",label:"到件"  },
          {  value:"3",label:"少件"  }
      ],
      search_value_express_state_array:[],
      QueryForm: { 
          isPage: true,
          page: 1,
          pagesize: 10,
          serchKeyword: "",
          search_type_user: "",
          search_value_user: "",
          approval_model: "",
          customer_uname: "",
          search_type_express_no: "",
          search_value_express_no: "",
          return_type: "",
          search_type_parts: "",
          search_value_parts: "",
          parts_class: "",
          search_type_date: "",
          search_value_date_start: "",
          search_value_date_end: "",
          search_type_id: "",
          search_value_id: "",
          iswork: "",
          repair_handle_state: "",
          search_type_express_state: "",
          search_value_express_state: "",
          return_supplement_type: "",
          check_state: "",
          check_result: "",
          census_tips_value:""
      },
      propstype: {
        value: "label",
        label: "label",
        children: "children"
      },
      typedata: [],
      technologys: [],
      customers: [],
      states: [],
      approvals: [],
      list: [],
      total: 0,
      Loading: true,
      edit_dialog:false,
      edit_dialogform:{
        census_tips:[],
        census_remark:"",
        id:"",
        repair_parts_id:"",
        repair_id:""
      },
      edit_dialogrule: {
        //census_remark: [{required: true, message: '此项为必填项'}]
      },
      show_pic_dialog:false,
      show_pic_dialogfrom :{
        repair_des_pic :[],
        repair_transfer_screenshot :[],
        return_pic :[],
        check_images :[]
      }
    };
  },
  created() {
    this.Query(); 
    this.getcustomer();  
    this.get_tags();
  },
  methods: {
    get_tags(){
    this.$post(this.$api + '/RK/enum_list', ['customer_repair_parts_census_tip'])
          .then((res) => {
            if (res.code === 0) {
              var census_arr = [];
              for(var i in res.data)
              {
                 if(res.data[i].enumname == 'repair_parts_tip_census')
                 {
                   var  inner_data  = res.data[i].data;
                     for(var j in inner_data)
                     {
                       census_arr.push({
                         effect:'plain', label: inner_data[j].name,type:'reko',value:inner_data[j].id
                       });
                     }
                 }
                 else{
                   break;
                 }
              }
              this.tags =  census_arr;
            } else {
              this.$notify({
                title: '失败',
                message: res.msg,
                type: 'error'
              });
            }
          });
    },
    set_tags(values){
        //设置当前选定tag标签
        for(var i in this.tags)
        {
          this.tags[i].effect = "plain";
          for(var j in values)
          {
              if(values[j] == this.tags[i].value)
              {
                this.tags[i].effect = "dark";
              } 
          } 
        }
    },
    get_click_tag(){
      var tag_result =[];
        // 获取当前选定的TAG标签
        for(var i in this.tags)
        {
           if(this.tags[i].effect == 'dark')
           {
              tag_result.push(this.tags[i].value);
           }
        }
        return tag_result;
    },
    click_tag(item){ 
      if( item.effect ==='plain')
      { 
        item.effect = 'dark';
      } 
      else{
        item.effect = 'plain';
      }
    },
    show_pic(row){
      this.show_pic_dialog = true;
      this.show_pic_dialogfrom.repair_des_pic = row.repair_des_pic;
      this.show_pic_dialogfrom.repair_transfer_screenshot = row.repair_transfer_screenshot;
      this.show_pic_dialogfrom.return_pic = row.return_pic;
      this.show_pic_dialogfrom.check_images = row.check_images;
      
    },
    edit(row){
        this.edit_dialog = true;
        this.edit_dialogform.repair_parts_id = row.repair_parts_id;
        this.edit_dialogform.repair_id = row.repair_id;
        this.edit_dialogform.census_remark = row.census_remark; 
        this.edit_dialogform.census_tips = this.set_tags(row.census_tips_value);
         
    },
    edit_dialog_btn(){  
      this.edit_dialogform.census_tips = this.get_click_tag();
 this.$refs['edit_dialogform'].validate((valid) => {
        if (valid) {
          this.$post(
            this.$api + '/repair/update_customer_repair_parts_census_remark',
            this.edit_dialogform
          ).then((res) => {
            if (res.code === 0) {
              this.$notify({
                title: '成功',
                message: res.msg,
                type: 'success',
              })
              this.edit_dialog = false;
              this.Query()
            } else {
              this.$notify({
                title: '失败',
                message: res.msg,
                type: 'error',
              })
            }
          })
        }
      }) 
    },
    search_type_express_state_change(value){
      console.log(value);
      this.QueryForm.search_value_express_state = "";
      switch(value)
      {
        case "0":
            this.search_value_express_state_array = this.send_state;
          break;
        case "1":
            this.search_value_express_state_array = this.get_state;
          break;
      }
    },
    table_row_style(row){ 
        switch(row.columnIndex)
        {
          case 0: 
            return "color: #FFFFFF;background:#1CC2A5";
          case 1: 
            return "color: #FFFFFF;background:#409EFF";
          case 2: 
            return "color: #FFFFFF;background:#E4B163";
          case 3: 
            return "color: #FFFFFF;background:#EF8A8A";
          case 4: 
            return "color: #FFFFFF;background:#9747FF";
          case 5: 
            return "color: #FFFFFF;background:#E72C27";
          case 6: 
            return "color: #FFFFFF;background:#24BCD1";
        }
    }, 
    Query(isquery) {
      if (isquery === true) {
        this.QueryForm.page = 1
      }
      this.Loading = true
      this.$post(this.$api + '/repair/search_repair_parts_send_return_census_list', this.QueryForm)
        .then((res) => {
          this.Loading = false;
          if (res.code === 0) {
            this.list = res.rows;
            this.total = res.total;
            for (var i in this.list) {
              if (this.list[i].repair_addtime !== null) {
                this.list[i].repair_addtime = this.list[i].repair_addtime.substring(0, 10)
              }
              if (this.list[i].mch_assurance_sdt !== null) {
                this.list[i].mch_assurance_sdt = this.list[i].mch_assurance_sdt.substring(0, 10)
              }
              if (this.list[i].mch_send_time !== null) {
                this.list[i].mch_send_time = this.list[i].mch_send_time.substring(0, 10)
              }
              if (this.list[i].mch_confirm_time !== null) {
                this.list[i].mch_confirm_time = this.list[i].mch_confirm_time.substring(0, 10)
              }
              if (this.list[i].repair_express_time !== null) {
                this.list[i].repair_express_time = this.list[i].repair_express_time.substring(0, 10)
              }
              if (this.list[i].return_addtime !== null) {
                this.list[i].return_addtime = this.list[i].return_addtime.substring(0, 10)
              }
              if (this.list[i].parts_return_express_receive_time !== null) {
                this.list[i].parts_return_express_receive_time = this.list[i].parts_return_express_receive_time.substring(0, 10)
              }
              if (this.list[i].check_time !== null) {
                this.list[i].check_time = this.list[i].check_time.substring(0, 10)
              } 
            }
          } else {
            this.$notify({
              title: '失败',
              message: res.msg,
              type: 'error'
            });
          }
        });
    },  
    getcustomer() {
      this.$get(this.$api + '/repair/get_customer_userlist', {
        'lv': 'excl_customer',
      })
        .then((res) => {
          if (res.code === 0) {
            this.customers = res.data
          } else {
            this.$notify({
              title: '失败',
              message: res.msg,
              type: 'error'
            });
          }
        });
    }, 
    excel() {
      this.$downloadpost(this.$api + '/repair/down_search_repair_parts_send_return_census_list_for_excel', this.QueryForm, true)
    },
    handleSizeChange(v) {
      this.QueryForm.pagesize = v;
      this.Query();
    },
    handleCurrentChange(v) {
      this.QueryForm.page = v;
      this.Query();
    },
  }
};
</script>
